<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 300px;
            border: 10px dashed green;
            background-color: red;
            /*边框 圆角半径*/
            border-radius: 160px;
            text-align: center;
            /*文字居中*/
        }
    </style>
</head>
<body>
<div id="box">圆形</div>
<script>
    var circle = document.getElementById("box")
    //鼠标按下
    circle.onmousedown = function () {
        circle.style.backgroundColor= 'yellow'
    }
    //鼠标抬起来
    circle.onmouseup =function () {
        circle.style.backgroundColor='red'
    }
    //鼠标滑过 =>从外部滑动到内部
    circle.onmouseover=function () {
        circle.style.backgroundColor='green';
        circle.style.borderColor='red';

    }
    //滑动出来=>从内部到外部
    circle.onmouseout=function () {
        circle.style.backgroundColor='red';
        circle.style.borderColor='green';
    }
    circle.onmousemove=function () {
    /*innerHtml 和innertext 都可以向html标签中
        添加文本
        区别:innerHtml中可以添加html代码,例如P标签就会被渲染出来
        innerTExt只能添加文本信息,标签也会当做普通文本信息,显示出来*/
        circle.innerHTML='<p>啊</p>'
        circle.innerText='<p>啊</p>'
        console.log("move");
    }



</script>
</body>
</html>